<template>
  <h1>Collapse组件</h1>
  <h2>基础面板</h2>
  <div>
    <RlCollapse :modelValue="[]">
      <RlCollapseItem name="1" title="Consistency">
        <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </RlCollapseItem>
      <RlCollapseItem name="2" title="Feedback">
        <div>
          Operation feedback: enable the users to clearly perceive their
          operations by style updates and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging
          elements of the page.
        </div>
      </RlCollapseItem>
    </RlCollapse> 
  </div>
  <h2>手风琴效果</h2>
  <div>
    <RlCollapse :modelValue="[]" accordion>
      <RlCollapseItem name="1" title="Consistency">
         <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </RlCollapseItem>
      <RlCollapseItem name="2" title="Feedback">
        <div>
          Operation feedback: enable the users to clearly perceive their
          operations by style updates and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging
          elements of the page.
        </div>
      </RlCollapseItem>
    </RlCollapse> 
  </div>
</template>

<script setup lang="ts">
import RlCollapse from '@/components/Collapse/Collapse.vue'
import RlCollapseItem from '@/components/Collapse/CollapseItem.vue'
defineOptions({
  name: 'ButtonView'
})
</script>

<style scoped>
h2{
  margin-top: 50px;
}
</style>